<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵩县全域智慧旅游产业大数据和决策分析云平台</title>
    <link rel="stylesheet" href="../../assets/css/public.css">
    <link rel="stylesheet" href="../../assets/css/common.css">
    <link rel="stylesheet" href="../../assets/css/index.css">
    <link rel="stylesheet" href="../../assets/css/traffic.css">
    <link rel="stylesheet" href="../../assets/css/animate.min.css">
</head>
<body>
<div class="box">
    <!--头部-->
    <div class="title-box">
        <div class="title-left">
            <span id="weather">小雨转晴</span>
            <span id="temperature">32/23℃</span>
            <span id="windPower">东风</span>
        </div>
        <div class="title-img">
            <h3>嵩县全域智慧旅游产业大数据和决策分析云平台</h3>
            <img src="../../assets/images/title-bg.png">
        </div>
        <div class="title-right">
            <a href="../admin/index.html">运营管理</a>
        </div>
    </div>
    <!--主体-->
    <div class="main-box">
        <!--导航-->
        <div class="nav-box">
            <ul>
                <li class="active">
                    <a href="#">
                        <div>
                            <img src="../../assets/images/icon-index.png">
                            <img src="../../assets/images/icon-index-active.png">
                        </div>
                        <p>旅游发展环境</p>
                    </a>
                </li>
                <li>
                    <a href="../basicElements/index.html">
                        <div>
                            <img src="../../assets/images/icon-analysis.png">
                            <img src="../../assets/images/icon-analysis-active.png">
                        </div>
                        <p>旅游基础要素</p>
                    </a>
                </li>
                <li>
                    <a href="../touristFlow/index.html">
                        <div>
                            <img src="../../assets/images/icon-image.png">
                            <img src="../../assets/images/icon-image-active.png">
                        </div>
                        <p>旅游客流监测</p>
                    </a>
                </li>
                <li>
                    <a href="../touristsPortrait/index.html">
                        <div>
                            <img src="../../assets/images/icon-portrait.png">
                            <img src="../../assets/images/icon-portrait-active.png">
                        </div>
                        <p>游客画像分析</p>
                    </a>
                </li>
                <li>
                    <a href="../tourismEnterprises/index.html">
                        <div>
                            <img src="../../assets/images/icon-operation.png">
                            <img src="../../assets/images/icon-operation-active.png">
                        </div>
                        <p>旅游企业监测</p>
                    </a>
                </li>
                <li>
                    <a href="../pinglun/index.html">
                        <div>
                            <img src="../../assets/images/icon-pinglun.png">
                            <img src="../../assets/images/icon-pinglun-active.png">
                        </div>
                        <p>互联网评论</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--数据内容-->
        <div class="content-box flex-column">
            <div class="content-nav">
                <ul>
                    <li>
                        <a href="index.html">旅游发展环境</a>
                    </li>
                    <li>
                        <a href="weather.html">环境气象监测</a>
                    </li>
                    <li class="active">
                        <a href="traffic.html">交通监测</a>
                    </li>
                </ul>
            </div>
            <div class="content-main flex-row flex1">
                <div class="content-right">
                    <div class="content-right-top">
                        <div class="content-right-bg flex1">
                            <div class="content-title">
                                实时路况
                                <div class="title-right">
                                    <div class="map-search">
                                        <input type="text" placeholder="请输入关键词">
                                        <button>搜索</button>
                                    </div>
                                    <div class="map-tab">
                                        <button class="congestion-btn">拥堵</button>
                                        <button class="amble-btn">缓行</button>
                                        <button class="smooth-btn">畅通</button>
                                        <button>路况信息</button>
                                    </div>
                                </div>
                            </div>
                            <div class="content-left-main">
                                <div class="map-box">
                                    <div class="map" id="allmap"></div>
                                    <div class="map-info">
                                        <div>
                                            <div>
                                                <i>
                                                    <img src="../../assets/images/icon-roadControl.png">
                                                    <span>道路管制</span>
                                                </i>
                                                <p>共0条</p>
                                            </div>
                                            <ul></ul>
                                        </div>
                                        <div>
                                            <div>
                                                <i>
                                                    <img src="../../assets/images/icon-trafficIncident.png">
                                                    <span>交通事故</span>
                                                </i>
                                                <p>共0条</p>
                                            </div>
                                            <ul></ul>
                                        </div>
                                        <div>
                                            <div class="active">
                                                <i>
                                                    <img src="../../assets/images/icon-toll.png">
                                                    <span>收费站管制</span>
                                                </i>
                                                <p>共4条</p>
                                            </div>

                                            <ul class="scrollbar">
                                                <li>
                                                    <span>1</span>
                                                    <p>
                                                        通许东收费站 大广高速（G5）开封至通许端段双向管制中
                                                    </p>
                                                </li>
                                                <li>
                                                    <span>2</span>
                                                    <p>
                                                        通许东收费站 大广高速（G5）开封至通许端段双向管制中
                                                    </p>
                                                </li>
                                                <li>
                                                    <span>3</span>
                                                    <p>
                                                        通许东收费站 大广高速（G5）开封至通许端段双向管制中
                                                    </p>
                                                </li>
                                                <li>
                                                    <span>4</span>
                                                    <p>
                                                        通许东收费站 大广高速（G5）开封至通许端段双向管制中
                                                    </p>
                                                </li>
                                            </ul>
                                        </div>
                                        <div>
                                            <div>
                                                <i>
                                                    <img src="../../assets/images/icon-conservation.png">
                                                    <span>养护施工</span>
                                                </i>
                                                <p>共0条</p>
                                            </div>
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script src="../../assets/plugin/jquery.min.js"></script>
<script src="../../assets/plugin/ECharts/echarts.js"></script>
<script src="../../assets/plugin/jquery.leoTextAnimate.js"></script>
<script src="../../assets/js/public.js"></script>
<script src="../../assets/js/traffic.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RbLCQuGNfG1cQrKmywquV6wEEkoVkyNY"></script>
<script>
      // 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(112.094137,34.140961), 13);  // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
  mapTypes: [
    BMAP_NORMAL_MAP,
    BMAP_HYBRID_MAP
  ]
}));
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.setMapStyle({style: 'midnight'})
//默认地图样式(normal)
//清新蓝风格(light)
//黑夜风格(dark)
//清新蓝绿风格(bluish)
//高端灰风格(grayscale)
//强边界风格(hardedge)
//青春绿风格(darkgreen)
//浪漫粉风格(pink)
//午夜蓝风格(midnight)
//自然绿风格(grassgreen)
//精简风格(googlelite)
//红色警戒风格(redalert)
      var blist = [];
      var districtLoading = 0;
      //设置样式
      map.setMapStyle({
          styleJson: [
              {//不显示点信息
                  "featureType": "poi",
                  "elementType": "all",
                  "stylers": {
                      "color": "#fffff ",
                      "visibility": "off"
                  }
              }
          ]
      });map.setMapStyle({
          styleJson: [
              {//不显示点信息
                  "featureType": "poi",
                  "elementType": "all",
                  "stylers": {
                      "color": "#fffff ",
                      "visibility": "off"
                  }
              }
          ]
      });

      function getBoundary(){
          //百度地图获取行政区域的对象
          var bdary = new BMap.Boundary();

          bdary.get("嵩县", function (rs) {       //获取行政区域

              //以下是获取行政区域的回调
              // map.clearOverlays();        //清除地图覆盖物

              //需要绘制边界多边形的点集合
              var paths = new Array();
              //行政区域点集合，以;分隔的
              var pointliststr = rs.boundaries[0];
              //3获取点数组，push到 paths中
              var pointlist = pointliststr.split(";");
              var firstPoint;
              for(var i =0;i<pointlist.length;i++)
              {

                  var tempPt = pointlist[i].split(',');
                  var newPoint = new BMap.Point(tempPt[0],tempPt[1]);
                  if(i==0){ firstPoint= newPoint;};

                  paths.push(newPoint);
              }
              //第一点再推进去，形成一个闭环，构造了多边形的内环
              paths.push(firstPoint);

              //自定义的八个便捷点，从东开始逆时针，东，东北，北，西北，西，西南，南，东南（必须按顺序来）
              paths.push(new BMap.Point(170.672126, 39.623555));
              paths.push(new BMap.Point(170.672126, 81.291804));
              paths.push(new BMap.Point(105.913641, 81.291804));
              paths.push(new BMap.Point(-169.604276,  81.291804));
              paths.push(new BMap.Point(-169.604276, 39.623555));
              paths.push(new BMap.Point(-169.604276, -68.045308));
              paths.push(new BMap.Point(105.913641, -68.045308));
              paths.push(new BMap.Point(170.672126, -68.045308));
              paths.push(new BMap.Point(170.672126, 39.623555));

              //4绘制第一个多边形，覆盖住除行政区外的所有部分,fillColor:填充色，strokeColor：边界颜色（设置透明，否则会有其他线条），strokeOpacity：线条透明，fillOpacity：填充物透明。
              var ply1 = new BMap.Polygon("",
                  { fillColor: "#062031", strokeColor: "transparent", strokeOpacity:0,fillOpacity:0.9}); //建立多边形覆盖物
              //将之前形成的点set到多边形对象中
              ply1.setPath(paths);
              //在地图上添加第一个多边形
              map.addOverlay(ply1);  //遮罩物是半透明的，如果需要纯色可以多添加几层


              //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层，绘制出边界线
              var ply = new BMap.Polygon(rs.boundaries[0],
                  { strokeWeight: 2, strokeColor: "#000",fillColor: "transparent" });
              map.addOverlay(ply);
              map.setViewport(ply.getPath());    //调整视野
          });
      }
      setTimeout(function(){
          getBoundary();
      }, 200);
</script>
</html>
